<template>  
  <div class="maintenance-task">  
    <!-- 标题部分 -->  
    <div class="header">  
      <!-- <div class="icon">  
        <img src="@/assets/icons/task-icon.png" alt="保养任务图标" />  
      </div>   -->
      <div class="title">保养任务</div>  
      <div class="status-bar"></div>  
    </div>  

    <!-- 图表部分 -->  
    <div class="chart-container">  
      <!-- 图例 -->  
      <div class="legend">  
        <span class="legend-item complete"><i></i> 已完成</span>  
        <span class="legend-item processing"><i></i> 保养中</span>  
        <span class="legend-item pending"><i></i> 待保养</span>  
      </div>  
      
      <!-- 柱状图 -->  
      <div ref="chart" class="chart"></div>  
    </div>  
  </div>  
</template>  
<script>  
import * as echarts from "echarts";  

export default {  
  name: "MaintenanceTask",  
  mounted() {  
    // 初始化图表  
    this.initChart();  

    // 监听窗口大小变化，动态调整组件大小  
    window.addEventListener("resize", this.updateSize);  
  },  
  beforeDestroy() {  
    // 移除窗口大小变化监听器  
    window.removeEventListener("resize", this.updateSize);  
  },  
  methods: {  
    initChart() {  
      // 获取图表容器  
      const chartDom = this.$refs.chart;  

      // 初始化 ECharts 实例  
      this.myChart = echarts.init(chartDom);  

      // 配置图表选项  
      const maintenanceOption = {  
        tooltip: {  
          trigger: "axis",  
          axisPointer: { type: "shadow" },  
        },  
        grid: {  
          left: "10%",  
          right: "5%",  
          bottom: "10%",  
          top: "20%",  
          containLabel: true,  
        },  
        xAxis: {  
          type: "category",  
          data: ["一月", "二月", "三月", "四月"],  
          axisLine: {  
            lineStyle: {  
              color: "rgba(0, 255, 255, 0.5)",  
            },  
          },  
          axisLabel: {  
            color: "#fff",  
          },  
        },  
        yAxis: {  
          type: "value",  
          axisLine: {  
            lineStyle: {  
              color: "rgba(0, 255, 255, 0.5)",  
            },  
          },  
          axisLabel: {  
            color: "#fff",  
          },  
          splitLine: {  
            lineStyle: {  
              color: "rgba(255, 255, 255, 0.1)",  
            },  
          },  
        },  
        series: [  
          {  
            name: "已完成",  
            type: "bar",  
            data: [120, 200, 150, 80],  
            barWidth: "20%",  
            itemStyle: {  
              color: "#00ff00",  
            },  
          },  
          {  
            name: "保养中",  
            type: "bar",  
            data: [60, 80, 120, 100],  
            barWidth: "20%",  
            itemStyle: {  
              color: "#00aaff",  
            },  
          },  
          {  
            name: "待保养",  
            type: "bar",  
            data: [80, 100, 60, 50],  
            barWidth: "20%",  
            itemStyle: {  
              color: "#ffaa00",  
            },  
          },  
        ],  
      };  

      // 设置选项并渲染图表  
      this.myChart.setOption(maintenanceOption);  

      // 调整图表大小以适应容器  
      this.updateSize();  
    },  
    updateSize() {  
      // 获取父容器大小  
      const parent = this.$el.parentNode;  
      if (parent) {  
        // 动态调整组件宽高  
        this.$el.style.width = `${parent.offsetWidth}px`;  
        this.$el.style.height = `${parent.offsetHeight}px`;  

        // 调整图表大小  
        this.myChart.resize();  
      }  
    },  
  },  
};  
</script> 
<style scoped>  
/* 主容器样式 */  
.maintenance-task {  
  width: 100%; /* 宽度由父容器控制 */  
  height: 400px; /* 高度由父容器控制 */  
  padding: 15px 20px;  
  border-radius: 12px;  
  background: rgba(10, 20, 40, 0.9); /* 深蓝背景 */  
  border: 1px solid rgba(0, 255, 255, 0.3); /* 青色边框 */  
  box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.2), 0 0 15px rgba(0, 255, 255, 0.5); /* 外发光效果 */  
  position: relative;  
  color: #fff;  
  font-family: Arial, sans-serif;  
  display: flex;  
  flex-direction: column;  
}  

/* 标题部分 */  
.header {  
  display: flex;  
  align-items: center;  
  margin-bottom: 15px;  
}  

.title {  
  font-size: 1.5rem; /* 使用相对单位，随容器大小变化 */  
  font-weight: bold;  
  color: #00baff;  
}  

.status-bar {  
  flex-grow: 1;  
  height: 4px;  
  background: linear-gradient(to right, #ffaa00, #00ff00, #00aaff); /* 状态条渐变 */  
  margin-left: 20px;  
  border-radius: 2px;  
}  

/* 图表部分 */  
.chart-container {  
  flex-grow: 1; /* 占满剩余空间 */  
  position: relative;  
}  

.chart {  
  width: 100%; /* 宽度自适应 */  
  height: 100%; /* 高度自适应 */  
}  

/* 图例 */  
.legend {  
  display: flex;  
  justify-content: center;  
  margin-bottom: 10px;  
}  

.legend-item {  
  display: flex;  
  align-items: center;  
  margin-right: 20px;  
}  

.legend-item i {  
  display: inline-block;  
  width: 10px;  
  height: 10px;  
  margin-right: 5px;  
  border-radius: 50%;  
}  

.legend-item.complete i {  
  background-color: #00ff00; /* 已完成 */  
}  

.legend-item.processing i {  
  background-color: #00aaff; /* 保养中 */  
}  

.legend-item.pending i {  
  background-color: #ffaa00; /* 待保养 */  
}  
</style>